<template>
  <view :class="theme">
    <view class="fixed"
      style="top: 0; left: 0; right: 0; bottom: auto; top: var(--window-top); left: var(--window-left); right: var(--window-right);">
      <u-image width="100%" height="610" src="/static/img/bg-auth.png" />
    </view>
    <view style="z-index: 9;">
      <view class="ai-center" style="margin: 180rpx auto 0;">
        <u-image radius="16" width="120" height="120" src="/static/logo.png" />
        <text class="mt-12 fs-32 fw-700">{{ systemInfo.appName }}</text>
      </view>
      <view class="br-36 oh bg-2" style="margin: 60rpx 40rpx;">
        <label class="fs-40 p-60 fw-500" style="padding: 60rpx 60rpx 0;">重置登录密码</label>
        <view class="p-30">
          <view class="br-12 fd-row ai-center pl-28 pr-28"
            style="margin: 30rpx; background-color: #f6faff; height: 88rpx;">
            <u-icon size="32" color="#999" name="phone" />
            <input v-model="formData.phoneNumber.value" class="f1 ml-24 height-100percent fs-28" type="number"
              maxlength="11" placeholder="请输入手机号码" placeholder-class="color-9" />
          </view>

          <view class="br-12 fd-row ai-center pl-28 pr-28"
            style="background-color: #f6faff; height: 88rpx; margin: 0 30rpx;">
            <u-icon size="32" color="#999" name="lock-open" />
            <input v-model="formData.captcha.value" class="f1 ml-24 height-100percent fs-28" type="number" maxlength="6"
              placeholder="请输入验证码" placeholder-class="color-9" />
            <button @click="getCaptcha" :disabled="formData.captcha.disabled" hover-class="tap-hover" plain
              hover-start-time="50" class="border-none m-6 ai-center jc-center color-5 fs-24 br-52"
              style="width: 160rpx;">
              {{ formData.captcha.text }}
            </button>
          </view>
          <view class="br-12 fd-row ai-center pl-28 pr-28"
            style="background-color: #f6faff; height: 88rpx; margin: 30rpx;">
            <u-icon size="32" color="#999" name="lock" />
            <input v-model="formData.password.value" class="f1 ml-24 height-100percent fs-28" type="password"
              maxlength="16" placeholder="请输入新密码" placeholder-class="color-9" />
          </view>
          <view class="br-12 fd-row ai-center pl-28 pr-28"
            style="background-color: #f6faff; height: 88rpx; margin: 0 30rpx 30rpx;">
            <u-icon size="32" color="#999" name="lock-fill" />
            <input v-model="formData.repeat_password.value" class="f1 ml-24 height-100percent fs-28" type="password"
              maxlength="16" placeholder="请确认新密码" placeholder-class="color-9" />
          </view>
          <button @click="reset" hover-class="tap-hover" class="bg-6 color-2 br-20" style="margin: 30rpx;">确认</button>
        </view>
      </view>
    </view>

  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { reactive } from "vue";

const { $config = {} } = getApp().globalData || {};
const { theme } = useMapState(["theme"]);
const systemInfo = uni.getSystemInfoSync();

const formData = reactive({
  phoneNumber: {
    value: "",
    errorMessage: "手机号码输入有误",
    field: "mobile",
    rule: /^1[0-9]{10}$/
  },
  captcha: {
    text: "验证码",
    errorMessage: "验证码输入有误",
    disabled: false,
    count: 60,
    timer: null as any,
    value: "",
    field: "code",
    rule: /^[0-9]{4,8}$/
  },
  password: {
    value: "",
    errorMessage: "密码应输入6-16位字母、数字和常用英文符号组合，不能包含空格、中文及特殊字符",
    isVisible: false,
    field: "password",
    rule: /^[a-z_A-Z0-9-\.!@#\$%\\\^&\*\)\(\+=\{\}\[\]\/",'<>~\·`\?:;|]{6,16}$/
  },
  repeat_password: {
    value: "",
    errorMessage: "确认密码输入有误",
    field: "c_password",
    isVisible: false,
    rule: /^[a-z_A-Z0-9-\.!@#\$%\\\^&\*\)\(\+=\{\}\[\]\/",'<>~\·`\?:;|]{6,16}$/
  },
});

const getCaptcha = () => {
  const { captcha, phoneNumber } = formData;
  if (captcha.disabled) return;
  uni.showToast({ icon: "loading", mask: true });
  if (!phoneNumber.rule.test(phoneNumber.value)) {
    uni.showToast({
      title: phoneNumber.errorMessage,
      icon: "none",
    });
    return;
  }
  uni.request({
    url: "/sendSms",
    data: {
      mobile: formData.phoneNumber.value,
      type: "verify",
    },
    success: ({ msg: title }: any) => {
      uni.showToast({ title, icon: "none" })
    }
  });
  countDown();
}

const countDown = () => {
  const { captcha } = formData;
  captcha.disabled = true;

  const intervalTask = () => {
    captcha.count--;
    captcha.text = `${captcha.count}S`;

    if (captcha.count <= 0) {
      captcha.disabled = false;
      captcha.text = "重新获取";
      captcha.count = 60;
      captcha.timer && clearInterval(captcha.timer);
      captcha.timer = null;
    }
    return intervalTask;
  }
  captcha.timer = setInterval(intervalTask(), 1000);
}


const reset = () => {
  const data: any = {},
    verification = (<Array<keyof typeof formData>>Object.keys(formData)).every(key => {
      const { value, field, errorMessage: title, rule } = formData[key] as any;

      if (title && !rule.test(String(value))) {
        uni.showToast({ title, icon: "none", duration: 2000 });
        return false;
      }

      field && (data[field] = value);
      return true;
    });

  if (formData.password.value !== formData.repeat_password.value) {
    uni.showToast({ title: "两次密码输入不一致", icon: "none" });
    return;
  }

  if (!verification) return;

  uni.showToast({ icon: "loading", mask: true });

  uni.request({
    url: "/forgetPassword", data,
    success() {
      uni.hideToast();
      uni.clearStorage();
      uni.showModal({
        title: "密码重置成功！请使用新密码重新登录",
        content: "立即跳转至登录页面...",
        showCancel: false,
        success() {
          uni.reLaunch({ url: $config.PAGE_LOGIN_ACCOUNT })
        }
      });
    }
  });
}


</script>

<style lang="scss" scoped>
// scss

::v-deep {
  switch {
    transform: scale(0.7);

    .wx-checkbox-input,
    .uni-checkbox-input {
      &:empty {
        border-color: $uni-bg-color-grey;
        background-color: transparent;
      }

      &:not(:empty) {
        border-color: transparent;
        background-color: $uni-bg-color-primary;
      }

      border-width: 2px;
      border-radius: 50%;
    }

    .wx-checkbox-input.wx-checkbox-input-checked,
    .uni-checkbox-input.uni-checkbox-input-checked {
      border-color: $uni-bg-color-grey;
      background-color: $uni-bg-color-primary;
    }

    &:not([disabled]) {

      .wx-checkbox-input:hover,
      .uni-checkbox-input:hover {
        border-color: $uni-bg-color-grey;
      }
    }
  }
}
</style>